import {
  LoginFormPage,
  ProConfigProvider, ProFormCheckbox,
  ProFormText
} from '@ant-design/pro-components'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { theme } from 'antd'

const Login = () => {
  const { token } = theme.useToken()
  return (
    <>
      <ProConfigProvider dark={false}>
        <div style={{ height: '100vh', backgroundColor: 'white' }}>
          <LoginFormPage
            logo="/ZDlogo.svg"
            title={'中鼎集成'}
            subTitle={'善集大成，立于大业'}
            containerStyle={{
              backgroundColor: 'rgba(250,250,250,0.6)',
              backdropFilter: 'blur(4px)'
            }}
            backgroundVideoUrl={'/bg_video.mp4'}
          >
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: (
                  <UserOutlined
                    style={{
                      color: token.colorText
                    }}
                    className={'prefixIcon'}
                  />
                )
              }}
              placeholder={'用户名: admin or user'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!'
                }
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText
                    }}
                    className={'prefixIcon'}
                  />
                )
              }}
              placeholder={'密码: ant.design'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！'
                }
              ]}
            />
            <div
              style={{
                marginBlockEnd: 24,
              }}
            >
              <ProFormCheckbox noStyle name="autoLogin">
                自动登录
              </ProFormCheckbox>
              <a
                style={{
                  float: 'right',
                }}
              >
                忘记密码
              </a>
            </div>
          </LoginFormPage>
        </div>
      </ProConfigProvider>
    </>
  )
}

export default Login
